<template>
	<div>
		<div class="head">
			<el-form inline size="mini">
				<el-form-item>
					<el-input placeholder="请输入用户名称" v-model="searchForm.username" clearable style="width: 150px"
						@keyup.enter.native="searchData"></el-input>
				</el-form-item>
				<el-form-item>
					<el-input placeholder="请输入手机号" v-model="searchForm.mobile" clearable @keyup.enter.native="searchData"
						style="width: 150px"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button icon="el-icon-plus" type="success" @click="open_dialog('add')">新增</el-button>
					<el-button icon="el-icon-search" type="primary" @click="searchData">搜索</el-button>
					<el-button icon="el-icon-refresh" type="danger" @click="clearForm">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
		<el-table :data="tableData" border size="mini" v-loading="loading" empty-text="暂无数据">
			<el-table-column label="用户编号" width="100px" align="center">
				<template slot-scope="scope">
					<span>{{ scope.row.id }}</span>
				</template>
			</el-table-column>
			<el-table-column label="用户名称" align="center">
				<template slot-scope="scope">
					<span>{{ scope.row.username }}</span>
				</template>
			</el-table-column>
			<el-table-column label="头像" align="center">
				<template slot-scope="scope">
					<el-image class="img-wrap" v-if="scope.row.avatar" :src="scope.row.avatar"
						:preview-src-list="scope.row.avatar | toArray"></el-image>
				</template>
			</el-table-column>
			<el-table-column label="手机号" align="center">
				<template slot-scope="scope">
					<span>{{ scope.row.mobile }}</span>
				</template>
			</el-table-column>
			<el-table-column label="角色名称" align="center">
				<template slot-scope="scope">
					<span>{{ scope.row.roleName }}</span>
				</template>
			</el-table-column>
			<el-table-column label="创建时间" align="center">
				<template slot-scope="scope">
					<span>{{ scope.row.createTime }}</span>
				</template>
			</el-table-column>
			<el-table-column label="状态" align="center">
				<template slot-scope="scope">
					<span v-if="scope.row.locked === 2" class="invalid">不可用</span>
					<span v-if="scope.row.locked === 1" class="active">可用</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center">
				<template slot-scope="scope">
					<el-button size="mini" type="warning" @click="handleCommand('edit', scope.row.id)">
						<i class="el-icon-edit"></i>
					</el-button>
					<el-button size="mini" type="danger" @click="handleCommand('del', scope.row.id)">
						<i class="el-icon-delete"></i>
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="page">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
				:page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
				:total="total"></el-pagination>
		</div>
		<admin-detail ref="detail" :dialogVisible.sync="dialogVisible" :type="type" :editId="editId" @submit="resetData" />
	</div>
</template>

<script>
import { admin_page, admin_del } from "@/api/sysuser";
import adminDetail from "./module/admin-detail";

export default {
	components: {
		adminDetail: adminDetail,
	},
	data() {
		return {
			editId: 0,
			dialogVisible: false,
			type: "add",
			pageNum: 1,
			pageSize: 10,
			total: 0,
			tableData: [],
			searchForm: {
				username: "",
				mobile: "",
			},
			loading: false,
		};
	},
	mounted() {
		this.getData();
	},
	methods: {
		/**
		 * 事件切换
		 */
		handleCommand(cmd, id) {
			if (cmd === 'edit') {
				this.open_dialog('edit', id)
				this.$emit("editId", id)
			}
			if (cmd === 'del') {
				this.delAdmin(id)
			}
		},
		/**
		 * 重新获取数据
		 */
		resetData() {
			this.pageNum = 1;
			this.dialogVisible = false;
			this.getData();
		},

		clearForm() {
			this.searchForm = {};
			this.pageNum = 1;
			this.getData();
		},

		/**
		 * 搜索数据
		 */
		searchData() {
			this.pageNum = 1;
			this.getData();
		},
		/**
		 * 打开新增的窗口
		 */
		open_dialog(type, editId) {
			this.dialogVisible = true;
			this.type = type;
			this.editId = editId;
		},
		/**
		 * 删除用户
		 *
		 */
		delAdmin(id) {
			this.$confirm("是否删除该用户?", "操作提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			}).then(async () => {
				const res = await admin_del(id);
				this.getData();
				this.$message.success(res)
			});
		},
		/**
		 * 获取分页数据
		 */
		async getData() {
			this.loading = true;
			let params = {};
			params.pageNumber = this.pageNum;
			params.pageSize = this.pageSize;
			params.mobile = this.searchForm.mobile;
			params.username = this.searchForm.username;
			const res = await admin_page(params);
			this.loading = false;
			this.total = Number(res.total);
			this.tableData = res.records;
		},
		/**
		 * 改变每页大小
		 */
		handleSizeChange(e) {
			this.pageSize = e;
			this.getData();
		},
		/**
		 * 改变当前页
		 */
		handleCurrentChange(e) {
			this.pageNum = e;
			this.getData();
		},
	},
};
</script>

<style lang="less"></style>
